<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        1.Vue中常用的按键别名:
            回车=> enter
            删除=>delete(捕获“删除”和“退格”健)
            退出=>esc
            空格=>space
            换行=>tab(特殊，必须配合keydown使用)
            上 =>up
            下 =>down
            左=>left
            右=>right
        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
        3.系统修饰键(用法特殊）:ctrl、alt、shift、meta
            (1).配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。
            (2).配合keydown使用:正常触发事件。
        4.也可以使用keyCode去指定具体的按键（不推荐)
        5.Vue.config. keyCodes.自定义键名=键码，可以去定制按键别名；
        注意：
        ctrl.y组合键只有按下该组合键才能触发事件； 
    -->

    <!-- 准备好一个容器 -->
    <div id="app">
        <h3>欢迎来{{name}}学习</h3>
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"/>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               name: '尚硅谷'
           },
           methods:{
               showInfo(event){
                //    if (event.keyCode!=13) {
                //        return;
                //    }
                    console.log(event.target.value);
               }
           }
        });
    </script>
</body>

</html>